<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <script src= "../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item"  v-bind:index="index"
                        v-on:remove="removeItems"></todo-items>
        </todo>
    </div>

    <!--<div>
        <slot name="todo-title"></slot>
        <ul>
            <slot name="todo-items"></slot>
        </ul>
    </div>-->
    <script>
        //定义待办事项 组件
        Vue.component("todo",{
            template: '<div><slot name=\'todo-title\'></slot><ul><slot name=\'todo-items\'></slot></ul></div>'
        })

        //定义待办事项 标题-组件
        Vue.component("todo-title",{
            props:['title'],
            template: '<div>{{title}}</div>'
        })

        //定义待办事项 内容-组件
        Vue.component("todo-items",{
            props:['item','index'],
            template: '<li>{{index}}--{{item}}<button v-on:click="remove">删除</button></li>',
            methods:{
                remove:function () {
                    this.$emit("remove")
                }
            }
        })


    let app = new Vue({
                el:"#app",
                data:{
                    title:'标题11',
                    items:["古力娜扎","迪丽热巴","马尔扎哈"]
                },
                methods: {
                    removeItems:function(index){
                        this.items.splice(index,1)
                    }
                }

            })
    </script>
</body>
</html>